<template>
	<div id="product">
		<van-nav-bar
			title="商品分组详情"
			left-text="返回"
			left-arrow
			@click-left="onClickLeft"
		/>

		<div class="container">
			<div class="shop-box">
				<div class="cover-box">
					<img
						:src="'http://localhost:3000/' + shopInfo.cover"
						style="width: 100%; height: 300px"
						alt=""
					/>
					<div
						style="
							display: flex;
							align-items: center;
							padding: 10px 20px;
						"
					>
						<img
							:src="'http://localhost:3000/' + shopInfo.logo"
							style="
								width: 70px;
								height: 70px;
								border-radius: 50%;
								box-shadow: 0 0 10px 1px #999;
							"
							alt=""
						/>
						<div style="overflow-x: hidden; flex: 1">
							<div
								style="
									padding: 0 10px;
									font-size: 24px;
									font-weight: 700;
									color: #222;
								"
							>
								{{ shopInfo.name }}
							</div>
							<div
								style="
									padding: 10px;
									font-size: 16px;
									color: #777;
								"
								v-html="shopInfo.desc"
							></div>
							<div
								style="
									display: flex;
									align-items: center;
									justify-content: end;
									padding: 0 10px;
									font-size: 12px;
									color: rgb(215, 19, 55);
								"
							>
								<van-icon name="guide-o" size="22" />
								{{ shopInfo.position }}
							</div>
						</div>
					</div>
				</div>
			</div>
			<van-tabs v-model:active="activeTab" @change="getProductList">
				<van-tab
					v-for="item in shopTypeList"
					:title="item.name"
					:name="item.id"
				>
					<Waterfall
						:list="copyProducts"
						:breakpoints="{
							1200: { rowPerView: 3 },
							800: { rowPerView: 2 },
							500: { rowPerView: 2 },
						}"
					>
						<template #item="{ item }">
							<div
								class="water-container"
								@click="handleToProduct(item.id)"
							>
								<LazyImg
									:url="
										'http://localhost:3000/' +
										item.product_images[0].url
									"
								/>
								<p class="water-title">{{ item.title }}</p>
								<p
									style="
										padding: 4px 8px;
										display: flex;
										justify-content: end;
									"
									v-if="item.product_labels.length"
								>
									<van-tag
										style="margin: 0 4px"
										v-for="labels in item.product_labels"
										type="warning"
									>
										{{ labels.name }}
									</van-tag>
								</p>
							</div>
						</template>
					</Waterfall>
				</van-tab>
			</van-tabs>
		</div>
	</div>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";

import { getProductByShopId, getShopById } from "@/api/basic";
import { useStore } from "vuex";
import { Toast } from "vant";

const { appContext } = getCurrentInstance();
const { apiUrl } = appContext.config;
const router = useRouter();
const route = useRoute();
const store = useStore();

const shopInfo = ref({});
const products = ref([]);
const shopTypeList = ref([]);
const copyProducts = ref([]);
const activeTab = ref(0);

onMounted(() => {
	getShopInfo();
});

const getShopInfo = async () => {
	const { code, message, result } = await getShopById({ id: route.query.id });
	if (code != 200) {
		Toast(message);
		return;
	}
	shopInfo.value = result;
	shopTypeList.value = [{ id: 0, name: "全部" }, ...result.shop_types];
	getProductList();
};

const getProductList = async () => {
	const { code, message, result } = await getProductByShopId({
		id: shopInfo.value.id,
	});
	if (code != 200) {
		Toast(message);
		return;
	}
	products.value = result;
	if (!activeTab.value) {
		copyProducts.value = JSON.parse(JSON.stringify(result));
	} else {
		copyProducts.value = JSON.parse(
			JSON.stringify(
				result.filter(ele => ele.shopTypeId == activeTab.value)
			)
		);
	}
};

const handleToProduct = id => {
	router.push({
		path: "/product",
		query: {
			id,
		},
	});
};

const onClickLeft = () => {
	router.back();
};
</script>
<style scoped>
#product {
	width: 100%;
}

.water-container {
	border-radius: 6px;
	box-shadow: 0 0 6px 1px #999;
	overflow: hidden;
}

.water-title {
	padding: 6px 10px;
	color: #222;
}
</style>
